<template>
  <div class="body">
    <div class="title">
      <div class="top">
        <span class="tip">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          class="add"
          @click="$router.push('/questions/new')"
          ><i class="el-icon-edit"></i> 新增试题</el-button
        >
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              v-model="form.catalogID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in catalogList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select
              v-model="form.tags"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select
              v-model="form.questionType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select
              v-model="form.difficulty"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              v-model="form.creatorID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              style="width: 49%; margin-right: 2%"
            >
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item"
              ></el-option
            ></el-select>
            <el-select
              v-model="form.city"
              placeholder="请选择"
              style="width: 49%"
            >
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="submit">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="alert"><i class="el-icon-info"></i> 共{{ tableData.counts }}条记录</div>
    <el-table
      :data="tableData?.items"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
    >
      <el-table-column prop="number" label="试题编号" width="120" />
      <el-table-column prop="subject" label="学科" />
      <el-table-column prop="catalog" label="目录" />
      <el-table-column prop="questionType" label="题型">
        <template v-slot="{ row }">
          {{ isDifficulty(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="题干" width="280" />
      <el-table-column label="录入时间" width="180" >
        <template v-slot="{ row }">
          {{ disponseTime(row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度">
        <template v-slot="{ row }">
          {{ isQuestionType(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" />
      <el-table-column label="操作" width="200">
        <template v-slot="{ row }">
          <el-button
            @click="preview(row.id)"
            type="primary"
            icon="el-icon-view"
            circle
          ></el-button>
          <el-button
            @click="$router.push('/questions/new?id=' + row.id)"
            type="success"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="del(row.id)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="choiceAdd(row.id)"
            type="warning"
            icon="el-icon-check"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <PageTool
      :total="tableData.counts"
      :paginationPage="form.page"
      :paginationPagesize="form.pagesize"
      @pageChange="pageChangeFn"
      @pageSizeChange="pageSizeChangeFn"
    />
    <QuestionsPreview
     :previewVisible.sync="previewVisible"
     :id="previewId"
    />
  </div>
</template>

<script>
import { simple as getSubjectList } from '@/api/hmmm/subjects.js'
import { simple as getCatalogList } from '@/api/hmmm/directorys.js'
import { simple as getTagsList } from '@/api/hmmm/tags.js'
import { simple as getUserList } from '@/api/base/users.js'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import PageTool from '../components/page-tool.vue'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    PageTool,
    QuestionsPreview
  },
  data () {
    return {
      questionType,
      difficulty,
      direction,
      tableData: {},
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      },
      subjectList: [],
      catalogList: [],
      tagsList: [],
      userList: [],
      previewVisible: false,
      previewId: null
    }
  },
  computed: {
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.form.province)
    }
  },
  created () {
    this.getSubjectList()
    this.getUserList()
    this.list()
  },
  watch: {
    'form.subjectID' (newVal) {
      this.getCatalogList(newVal)
      this.getTagsList(newVal)
      this.form.catalogID = null
      this.form.tags = null
    },
    'form.province' () {
      this.form.city = null
    }
  },
  methods: {
    clear () {
      this.form = {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      }
      this.$refs.form.resetFields()
    },
    submit () {
      this.form.page = 1
      this.list()
    },
    isQuestionType (value) {
      return this.questionType.find((i) => +i.value === +value)?.label
    },
    isDifficulty (value) {
      return this.difficulty.find((i) => +i.value === +value)?.label
    },
    async getSubjectList () {
      const { data } = await getSubjectList()
      this.subjectList = data
    },
    async getCatalogList (subjectID) {
      const { data } = await getCatalogList({ subjectID })
      this.catalogList = data
    },
    async getTagsList (subjectID) {
      const { data } = await getTagsList({ subjectID })
      this.tagsList = data
    },
    async getUserList () {
      const { data } = await getUserList()
      this.userList = data
    },
    disponseTime (str) {
      return str.split('.')[0].replace(/T/, ' ')
    },
    async list () {
      const { data } = await list(this.form)
      this.tableData = data
    },
    preview (id) {
      this.previewVisible = true
      this.previewId = id
    },
    async choiceAdd (id) {
      await this.$confirm('此操作将该题目加入精选, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'info'
      })
      await choiceAdd({ id, choiceState: 0 })
      this.list()
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
      await remove({ id })
      this.list()
    },
    pageChangeFn (page) {
      this.form.page = page
      this.list()
    },
    pageSizeChangeFn (size) {
      this.form.pagesize = size
      this.form.page = 1
      this.list()
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px 20px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
  .title {
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .tip {
        font-size: 12px;
        color: pink;
      }
    }
    .el-form {
      overflow: hidden;
    }
  }
}
</style>
